

import React from 'react'
import {Link} from 'react-router-dom'
import {Icon,Input,Form,Button,Row,Col,message,Select } from 'antd'
import PureRenderMixin from 'react-addons-pure-render-mixin';

import User from 'service/user-service.jsx'
import MMUtile from 'util/mm.jsx'
const _mm = new MMUtile();
const _user = new User();

const FormItem = Form.Item;
const Option = Select.Option;

class VerifyPhoneForm extends React.Component{
	constructor(props){
		super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			CodeValue:'获取验证码',
			canGetCode:false,
			codenum:120,
			phone:'',
			captcha:''

		}
		

	}

	//点击验证码事件
  getHandleCode(rule, value, callback){
    //发送短信验证码接口
    const form = this.props.form;
    const phone = form.getFieldValue('phone');
  	_user.sendSMS({
			phone:phone
		}).then((res)=>{
      message.success('请在手机上接收并填写验证码');
    },(errMsg)=>{
      _mm.errorTips(errMsg);
      
    })

  	//如果不重复将倒数120秒在按钮上显示
  	if(this.timer){
        clearTimeout(this.timer);
    }
  	this.timer = setInterval(()=>{
  		if(this.state.codenum ===0){
  			//倒数到0，将按钮变为可用
  			this.setState({
					CodeValue:'获取验证码',
					canGetCode:false,
					codenum:120
				})
				clearTimeout(this.timer);
  		}else{
  			//倒数期间，将按钮变为禁用
				this.setState({
					CodeValue:this.state.codenum--+'秒',
					canGetCode:true
				})
  		}

  	},1000);  	
  }
  
  handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
      	//对比验证码，
      	this.props.getIsCodeRight2({phone:values.phone,code:values.captcha});
		    $("#verifyInput").val(""); 
		    this.setState({
					CodeValue:'获取验证码',
					canGetCode:false,
					codenum:120
				})
				clearTimeout(this.timer);
			}
		});
  }
  handleChange(e){
  	
  }

  checkPhone(rule, value, callback){
    const form = this.props.form;
    const phone = form.getFieldValue('phone')
    if(!(/^1[34578]\d{9}$/.test(phone))){ 
        callback("手机号码有误，请重填");  
    }  else {
    	//将手机验证码变为可用
    	this.setState({
    		canGetCode:false
    	})
      callback();
    }
  }
	render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    
		return(
			<div>
				<Form onSubmit={(e)=>{this.handleSubmit(e)}}> 
					<p>为保证您的信息安全，请先校验手机再进行绑定</p>
	        <FormItem
	          {...formItemLayout}
	          label="手机号"
	        >
	          {getFieldDecorator('phone', {
	            rules: [{ required: true, message: '请输入您的手机号!' }, { validator: this.checkPhone.bind(this) }],
	            initialValue: this.state.phone,
	          })(
	            <Input  />
	          )}
	        </FormItem>
	        <FormItem
	          {...formItemLayout}
	          label="验证码"
	        >
	          <Row gutter={8}>
	            <Col span={12}>
	              {getFieldDecorator('captcha', {
	                rules: [{ required: true, message: '请输入您获取的验证码!' }],
	            		initialValue: this.state.captcha,
	              })(
	                <Input id="verifyInput"  />
	              )}
	            </Col>
	            <Col span={12}>
	              <Button  onClick={this.getHandleCode.bind(this)} disabled={this.state.canGetCode}>{this.state.CodeValue}</Button>
	            </Col>
	          </Row>
	        </FormItem>	       
	        <FormItem {...tailFormItemLayout}>

	          <Button type="primary" htmlType="submit" size="large">提交</Button>
	        </FormItem>
	      </Form>
			</div>
		)
	}
}

const VerifyPhone = Form.create()(VerifyPhoneForm);
export default VerifyPhone;